<script lang="ts" setup>
	import { ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router';
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	let busObj = ref({})
	let isVip = ref(0)
	onLoad((option) => {
		console.log(option, "打印options");
		busObj.value = JSON.parse(option.obj)
		console.log(JSON.parse(option.obj), "打印busObj");
		opJuan()
		getJuanList()
	})
	const {
		proxy,
	} = getCurrentInstance()
	let router = useRouter();
	const opJuan = () => {
		//领卷前判断是否为商家会员
		proxy.$req('GET', proxy.$api.isNowBusVip, {
			storeId: busObj.value.id,
		}).then((res) => {
			console.log(res);
			isVip.value = res.result
		})

	}
	const joinVip = () => {
		//点击加入会员
		proxy.$req('GET', proxy.$api.getBusinessVip, {
			storeId: busObj.value.id
			// storeId: busObj.value.meiyeSupplier.id
		}).then((res) => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			setTimeout(() => {
				router.back()
			}, 1000)
		})
	}
	let jusnList = ref([])
	const getJuanList = () => {
		//获取优惠卷
		proxy.$req('GET', proxy.$api.getStoreJuan, {
			storeId: busObj.value.id
			// storeId: busObj.value.meiyeSupplier.id
		}).then((res) => {
			jusnList.value = res.result.records
		})
	}
	const lingjuan = (id, status) => {
		if (status == 2) return
		proxy.$req('GET', proxy.$api.lingjuan, {
			id,
		}).then((res) => {
			if (res.success) {
				uni.showToast({
					title: '成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
			getJuanList()
		})
	}
</script>
<template>
	<view class="aa" @click="joinVip" v-if="!isVip">
		立即加入会员
	</view>
	<view class="aa" v-else>
		{{busObj.storeName}} 店铺会员
	</view>
	<view class="" v-if="jusnList.length>0">
		<view v-for="(item,index) in jusnList" :key="index"
			style="height: 300rpx;border-radius: 24rpx 24rpx 0rpx 0rpx;padding: 0 32rpx;">
			<view class="r-flex-between-center" style="height: 110rpx;">
				<text> </text>
				<!-- <text style="font-size: 36rpx;font-weight: 500;">优惠卷</text> -->
				<!-- <u-icon name="close" @click="youhuiShow=false"></u-icon> -->
			</view>
			<view class="youhuijuan r-flex-center-center">
				<view class="left c-flex-center-center">
					<view>
						<text style="font-size: 42rpx;font-weight: bold;color: #FFFFFF;margin-right: 6rpx;">￥</text>
						<text style="font-size: 80rpx;font-weight: bold;color: #FFFFFF;">99</text>
					</view>
					<text style="font-size: 24rpx;font-weight: 400;color: #FFFFFF;">店铺优惠券</text>
				</view>
				<view class="right">
					<view class="rt">
						<text>限该店内使用</text>
						<text>{{ item.title }}</text>
					</view>
					<view class="rb r-flex-between-center">
						<view class="rb1">
							有效期至<br />
							{{ item.endtime }}
						</view>
						<view class="rb2" @click="lingjuan(item.id,item.status)">
							{{ item.status==2?'已领取':'领取' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="margin-top: 150rpx;" v-else>
		<u-empty mode="coupon">
		</u-empty>
	</view>
</template>
<style lang="scss">
	.aa {
		width: 100%;
		height: 200rpx;
		background: #CB645E;
		text-align: center;
		line-height: 200rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.youhuijuan {
		width: 686rpx;
		height: 224rpx;
		background-color: #fff;
		border: 2rpx solid rgba(203, 100, 94, 0.24);
		border-radius: 24rpx;
		margin: 16rpx auto;
		border-left: none;

		.left {
			width: 258rpx;
			height: 100%;
			background-image: url('../../../static/images/juan.png');
		}

		.right {
			width: 364rpx;
			height: 100%;
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.rt {
				margin-top: 32rpx;
				margin-bottom: 58rpx;

				text:nth-child(1) {
					display: inline-block;
					width: 152rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: linear-gradient(270deg, #FFF1EE 0%, #FEEFF1 47%, #FEEAF6 100%);
					border-radius: 20rpx;
					font-size: 20rpx;
					font-weight: 600;
					color: #F22F19;
					margin-right: 16rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}
			}

			.rb {
				.rb1 {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
					line-height: 1.5;
				}

				.rb2 {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #CB645E;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>